<template>
	<view>
		<!-- 尺寸 -->
		<view class="main-view mar-t20 pad20">
			<view class="flex-cb border-bot">
				<view class="">尺寸</view>
				<view class="" @tap="setField('isDelSize')">{{isDelSize?'完成':'编辑'}}</view>
			</view>
			<view class="size-list pad-t20">
				<view class="size-view flex-cc" v-for="(item) in sizeList" :key="item.name">
					{{item.name}}
					<view v-if="isDelSize" @tap="delId(item.id,item.name,'size')" class="close-cion qxicon iconwrong"></view>
				</view>
				<view class="size-view flex-cc" v-if="isAddSize">
					<input type="text" value="" placeholder="输入" v-model="inputSize"/>
				</view>
				<view class="size-view flex-cc" v-if="!isAddSize" @tap="setField('isAddSize')">
					新增
				</view>
				<view class="position-view" v-for="indexs in (parseInt((sizeList.length+1)/4))" :key="indexs"></view>
			</view>
			<view class="but-view flex-ca pad20" v-if="isAddSize">
				<view class="flex-cc" @tap="addSizeVal">
					确定
				</view>
				<view class="flex-cc" @tap="closeAddSize">
					取消
				</view>
			</view>
		</view>
		<!-- 颜色 -->
		<view class="main-view mar-t20 pad20">
			<view class="flex-cb border-bot">
				<view class="">颜色</view>
				<view class="" @tap="setField('isDelColor')">{{isDelColor?'完成':'编辑'}}</view>
			</view>
			<view class="size-list pad-t20">
				<view class="size-view flex-cc" v-for="(item) in colorList" :key="item.name">
					{{item.name}}
					<view v-if="isDelColor" @tap="delId(item.id,item.name,'color')" class="close-cion qxicon iconwrong"></view>
				</view>
				<view class="size-view flex-cc" v-if="isAddColor">
					<input type="text" value="" placeholder="输入" v-model="inputColor"/>
				</view>
				<view class="size-view flex-cc" v-if="!isAddColor" @tap="setField('isAddColor')">
					新增
				</view>
				<view class="position-view" v-for="indexs in (parseInt((colorList.length+1)/4))" :key="indexs"></view>
			</view>
			<view class="but-view flex-ca pad20" v-if="isAddColor">
				<view class="flex-cc" @tap="addColorVal">
					确定
				</view>
				<view class="flex-cc" @tap="closeAddColor">
					取消
				</view>
			</view>
		</view>
		
		
		<!-- 颜色 -->
		<view class="main-view mar-t20 pad20">
			<view class="flex-cb border-bot">
				<view class="">规格价格/库存</view>
				<view class="">编辑</view>
			</view>
			<view class="">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//尺码数组
				sizeList:[
					{id:1,name:'S'},
					{id:2,name:'M'},
					{id:3,name:'L'},
					{id:4,name:'XL'},
					{id:5,name:'XXL'},
					{id:6,name:'3XL'},
					{id:7,name:'4XL'},
					{id:8,name:'5XL'},
				],
				//颜色数组
				colorList:[
					{id:1,name:'黄色'},
					{id:2,name:'绿色'},
					{id:3,name:'白色'},
					{id:4,name:'棕色'},
					{id:5,name:'灰色'},
					{id:6,name:'黑色'},
					{id:7,name:'紫色'},
					{id:8,name:'红色'},
				],
				isAddSize:false,	
				isDelSize:false,
				inputSize:'',
				
				isAddColor:false,
				isDelColor:false,
				inputColor:'',
			}
		},
		methods: {
			/* 设置字段 */
			setField(field,type){
				if(field == 'isAddSize')this.isAddSize = type || true;
				if(field == 'isAddColor')this.isAddColor = type || true;
				if(field == 'isDelSize')this.isDelSize = !this.isDelSize;
				if(field == 'isDelColor')this.isDelColor = !this.isDelColor;
			},
			
			/* 添加尺码 */
			addSizeVal(e){
				if(this.inputSize != ''){
					this.sizeList.push({id:this.sizeList.length,name:this.inputSize})
				}else{
					uni.showToast({
						title:'请输入尺码',
						icon:'none'
					})
				}
				this.inputSize = '';
			},
			/* 关闭添加尺码 */
			closeAddSize(e){
				this.inputSize = '';
				this.isAddSize = false;
			},
			
			/* 添加颜色 */
			addColorVal(e){
				if(this.inputColor != ''){
					this.colorList.push({id:this.colorList.length,name:this.inputColor})
				}else{
					uni.showToast({
						title:'请输入颜色',
						icon:'none'
					})
				}
				this.inputColor = '';
			},
			/* 关闭添加颜色 */
			closeAddColor(e){
				this.inputColor = '';
				this.isAddColor = false;
			},
			
			delId(id,name,type){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除'+name+'?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							if(type == 'color'){
								that.colorList.splice(that.colorList.findIndex(item => item.id === id), 1);
							}
							if(type == 'size'){
								that.sizeList.splice(that.sizeList.findIndex(item => item.id === id), 1);
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    },
				})
			},
		}
	}
</script>

<style>
	.main-view{
		background-color: #FFFFFF;
	}
	.size-list{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
	}
	.position-view,.size-view{
		width: 150upx;
		margin: 10upx 0;
	}
	.size-view{
		padding: 12upx;
		font-size:28upx;
		font-weight:400;
		color:rgba(124,124,124,1);
		line-height:40upx;
		border: 1upx solid rgba(151,151,151,1);
		border-radius:8px;
		position: relative;
	}
	.position-view{
		content: '';
	}
	.but-view view{
		background-color: #007AFF;
		color: #FFFFFF;
		padding: 10upx;
		border-radius: 20upx;
		width: 200upx;
	}
	.close-cion{
		position: absolute;
		top: -12upx;
		right: -12upx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
	input{
		font-size:28upx;
		font-weight:400;
		line-height:40upx;
		text-align: center;
	}
</style>
